<template>
<div>

    <div >
        <font size="6" bold   style="position:relative;left:700px">项目工资登记查看</font>
      </div>
      <br>
      
<el-form :model="laber"  label-width="100px" class="demo-ruleForm">
    <!-- 第一个表格 -->
    <table class="divtable" width="100%">
        <tr>
            <td colspan="8" class="color">基本信息</td>
        </tr>
        <tr>
            
            <td class="tabletd">编号:</td>
            <td><el-input v-model="apply.id" readonly></el-input></td>
            <td class="tabletd">所属项目:</td>
            <td ><el-input v-model="apply.project_name" readonly></el-input></td>
            <td class="tabletd">工资类别:</td>
            <td><el-input v-model="apply.type" readonly></el-input></td>
            <td class="tabletd">年度:</td>
            <td><el-input  v-model="apply.year" readonly></el-input></td>
        </tr>
        <tr>
            <td class="tabletd">月份:</td>
            <td><el-input  v-model="apply.menth" readonly></el-input></td>
            <td class="tabletd">登记日期:</td>
            <td><el-input type="date" v-model="apply.apply_date"  readonly></el-input></td>
            <td class="tabletd">填报人:</td>
            <td><el-input v-model="apply.handler_id"   readonly></el-input></td>
            <td class="tabletd"></td>
            <td></td>
        </tr>
        
    </table>
    </el-form>

    <br>
    <div><font>合同附件</font></div>
    <el-table :data="attachemen_info" border style="width: 100%;">
    <el-table-column prop="file_name" label="文件名称">
    </el-table-column>
    <el-table-column prop="infoname"  label="上传人">
    </el-table-column>
    <el-table-column prop="upload_date" label="上传时间">
    </el-table-column>
     <el-table-column fixed="right" width="200">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">下载</el-button>
      </template>
    </el-table-column>
  </el-table>

  <br>
  <div><font>工程量清单</font></div>
  <el-table :data="work_list" border style="width: 100%;">
    <el-table-column prop="id" label="编号">
    </el-table-column>
    <el-table-column prop="name"  label="姓名">
    </el-table-column>
    <el-table-column prop="type" label="工种">
    </el-table-column>
    <el-table-column prop="day" label="出勤天数">
    </el-table-column>
    <el-table-column prop="salaryday" label="日工资">
    </el-table-column>
    <el-table-column prop="salary" label="基本工资">
    </el-table-column>
    <el-table-column prop="salaryplus" label="加班费">
    </el-table-column>
    <el-table-column prop="paysalary" label="应发工资">
    </el-table-column>
    <el-table-column prop="borrowsalary" label="借款">
    </el-table-column>
    <el-table-column prop="insurancesalary"  label="保险">
    </el-table-column>
    <el-table-column prop="deductsalary"  label="扣钱">
    </el-table-column>
    <el-table-column prop="allocatesalary"  label="实发工资">
    </el-table-column>
  </el-table>

  <br>
  <div><font>审批流程</font></div>
  <el-table :data="fromaudit" border style="width: 100%;">
    <el-table-column prop="flowNodeName" label="流程节点">
    </el-table-column>
    <el-table-column prop="user_realname"  label="审批人">
    </el-table-column>
    <el-table-column prop="info" label="审批意见">
    </el-table-column>
    <el-table-column prop="remark" label="描述">
    </el-table-column>
    <el-table-column prop="createdate" label="创建时间">
    </el-table-column>
  </el-table>

    





  </div>
</template>

<script>

    import providerinfo from '@/model/smj/Providerinfo'
    const provider= new providerinfo;

import XingMuGongZi from '@/model/smj/XingMuGongZi'
const xiangmugongzi = new XingMuGongZi;



export default {
  name: "LaoWuHeTong",
  components: {},
  directives: {},
  data() {
    return {
        apply:{},
        params:{},
        attachemen_info:[],
        work_list:[],
        fromaudit:[]
    }
  },
  mounted() {},
  methods: {

            list(){
                let id = this.$route.query.id
                this.params.id=id;
                xiangmugongzi.listlabersalary(this.params).then((response)=>{
                    this.apply=response.data.data.data.records[0];
                    //查询附录文件表
                    let ids = response.data.data.data.records[0].attach_ids
                    console.log("ids:"+ids)
                    provider.list4(ids).then((response)=>{
                        this.attachemen_info= response.data;
                    })

                    //获取工程量清单
                    let id =response.data.data.data.records[0].id;
                    console.log(id)
                    xiangmugongzi.getWorkList(id).then((response)=>{
                        this.work_list= response.data;
                    })

                    //审批流程
                    xiangmugongzi.getfromaudit(id).then((response)=>{
                        console.log(response.data)
                        for (let index = 0; index < response.data.length; index++) {
                             if(response.data[index].info == 'Y'){
                                 response.data[index].info ='同意'
                             }
                             if(response.data[index].info == 'N'){
                                 response.data[index].info ='不同意'
                             }
                             response.data[index].createdate = this.renderTime(response.data[index].createdate)
                            
                        }
                        this.fromaudit= response.data;
                    })

                })

            },

            //文件下载
            handleClick(row){
                console.log(row)
                location.href = 'http://localhost/download?token=' + this.token + '&url=' + row.file_path + '&name=' + row.file_name
            },

            //时间转码
            renderTime(date) {
                var dateee = new Date(date).toJSON();
                return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 
            }

  },
  computed: {
            token: {
                get() {
                    return this.$store.state.token
                }
            },
            checkRoute(){
                return Object.keys(this.$route.params).length != 0
            }
        },
  created() {
       this.list();
  },
  
};
</script>

<style>
.divtable{
    border-collapse:collapse;
}
.divtable td{
    padding:10px;
    border:1px solid rgb(7, 136, 175);
}
.tabletd{
    text-align: right;
    background-color: rgb(113, 222, 241);
}
.color{
    background-color: rgb(113, 222, 241);
}
.divtable2{
    border-collapse:collapse;
}
.divtable2 td{
    padding:10px;
    border:1px solid rgb(7, 136, 175);
}
.td{
    text-align: center;
}
</style>